<template>
	<div>
	<el-form ref="loginForm" class="loginform" :model="form">
		<el-input v-model="form.response_type" name="response_type"  />
		<el-input v-model="form.client_id" name="client_id"  autocomplete="off" />
		<el-input v-model="form.scope" name="scope"   autocomplete="off" />
		<el-input v-model="form.redirect_uri" name="redirect_uri"  autocomplete="off" />
		<el-input v-model="form.state" name="state"  autocomplete="off" />
	</el-form>
	<el-button type="primary" :disabled="form.submitDisable" @click="getCode" style="margin-left:80px;">确定</el-button>
	</div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { AuServerUtil } from '@/util/auth/au_server_util';
import { useRoute } from 'vue-router';
import { ref, reactive, watch, onBeforeMount } from 'vue';
const route = useRoute();
const history = window.history;

const loginForm=ref();
let form = reactive({
	csrf: {
		headerName: '',
		parameterName: '',
		token: ''
	},
	response_type:"code",
	client_id:"XcWebApp",
	scope:"all",
	redirect_uri:"http://client.sso.com:3000/signin/savetoken",
	state:"348ise",
	sessionId:"",
	submitDisable: false
});
onBeforeMount(async () => {
	let paramFromBeforePage = history.state; //使用history对象获取前一个页面要传递的参数
	if (paramFromBeforePage) {

		if (paramFromBeforePage.csrf) {
			let p2 = JSON.parse(paramFromBeforePage.csrf);
			Object.assign(form.csrf, p2);
		}
		if (paramFromBeforePage.sessionId) {
			form.sessionId=paramFromBeforePage.sessionId;
		}
	}

});

const authSuccess=(code)=>{
	form.code=code;
	console.log("成功获取授权码："+form.code);
	AuServerUtil.toGetToken(form,(token)=>{
		console.log("成功获取token:");
		console.log(token);
	},(res)=>{
		console.log("获取token失败:");
		console.log(res);
	});
};
const authFailed=(codeUrl)=>{
	form.code="";
	console.log("没找到授权码："+codeUrl);
};
const getCode = () => {
	AuServerUtil.toGetCode(form,authSuccess,authFailed);
};
</script>
<style>
.curMain {
	--el-main-padding: 0px;
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loginform {
	max-width: 660px;
}
.curFoot {
	/**底部宽度*/
	width: 100%;
	padding: 0px;
	bottom: 0px;
}
</style>
